<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>个人书库</title>

  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <link href="../css/all.css" rel="stylesheet"/>
  <link href="../css/index.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../css/layui.css" media="all"/>
  <script src='../js/jquery-2.0.3.min.js'></script>
  <script type="text/javascript">
  function toBook(id){
		 window.parent.location.href='../book/'+id;
  }
  
  function unCollect(bookid){
  	$.ajax({
  		url:"/library/unCollectBook",
  		type:"GET",
  		data:{bookid:bookid},
  		success: function(data){
  			location.href='../library';
  		}
  	});
  }
  </script>
</head>
<body>
  <!-- 菜单栏 Start -->
  <div th:include="include :: header"></div>
  <!-- 菜单栏 End -->

  <div class="container container-top" style="min-height:723px;">
  
    <div class="collection-div">
    <th:block th:if="${#lists.isEmpty(bookSet)}">
    	<h5 style="text-align: center">什么都没有？赶紧去收藏吧</h5>
    </th:block>
    
    <th:block th:if="${not #lists.isEmpty(bookSet)}">
	    <th:block th:each="book,index:${bookSet}">
	      <ul class="order_lists clear-f">
	        <li class="list_con">
	          <div class="list_img">
	            <a th:onclick="'javascript:toBook('+${book.bookid}+')'">
	              <img th:src="${book.bookpicture}" alt="图书图片"/>
	            </a>
	          </div>
	          <div class="list_text">
	            <a th:onclick="'javascript:toBook('+${book.bookid}+')'" th:text="${book.bookname}">书名</a>
	          </div>
	        </li>
	        <li class="list_info">
	          <p th:text="'作者：'+${book.bookauthor}">作者:666</p>
	          <p th:text="'出版社：'+${book.bookpress}">出版社:666</p>
	          <p th:text="'类型：'+${book.type.typename}">类型：文学</p>
	        </li>
	        <li class="list_op">
	          <p class="del">
	            <a th:onclick="'unCollect(\''+${book.bookid}+'\')'" class="delBtn">移除收藏</a>
	          </p>
	        </li>
	      </ul>
	     </th:block> 
     </th:block>  
      
    </div>
   
  </div>

  <!-- footer Start -->
  <div th:include="include :: footer"></div>
  <!-- footer End -->

  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>

</html>
